<template>
  <div>
    <div class="consult">
      <BannerImg url="consult/banner.jpg"></BannerImg>
      <Row class="floor">
        <Col v-for="item in items" :lg="{span:24}" :xs="{span:24}">
          <Card :bordered="false">
            <Row :gutter="16">
              <Col :lg="{span:9}" :xs="{span:24}">
                <img :src="item.imgSrc" alt srcset>
              </Col>
              <Col :lg="{span:15}" :xs="{span:24}">
                <p class="title">{{item.title}}</p>
                <dl>
                  <dd>
                    <Icon type="md-apps" color="#f19fc3" size="20"/>
                    <span>{{item.apps}}</span>
                    <Icon type="md-pricetag" color="#f19fc3" size="20"/>
                    {{item.pricetag}}
                  </dd>
                  <dd>
                    <p>
                      <Icon type="ios-paper-outline" color="#f19fc3" size="20"/>
                      {{item.paper}}
                    </p>
                  </dd>
                  <dd>
                    <p>
                      <Icon type="md-pin" color="#f19fc3" size="20"/>
                      {{item.pin}}
                    </p>
                  </dd>
                  <dd>
                    <Button type="error" @click="toConsultItem">活动进行中</Button>
                  </dd>
                </dl>
              </Col>
            </Row>
            <Divider dashed/>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span="24" style="text-align:center;margin:30px 0">
          <Page :total="100" prev-text="上一页" next-text="下一页"/>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        },
        {
          imgSrc: require("../../assets/images/consult/item.jpg"),
          title: "新秀国际舞蹈学校：“青春筑梦 艺绽芳华”七周年汇报演出",
          apps: "线下",
          pricetag: "120元每人",
          paper: "2018年10月28日 14:30-18:30",
          pin: "新乡市平原文化艺术中心大剧院"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    toConsultItem() {
      this.$router.push({
        name: "consultItem"
      });
    }
  }
};
</script>

<style lang="less">
.consult {
  font-family: 'Microsoft YaHei' ;
  .floor {
    width: 1200px;
    margin: 0 auto 80px;
    @media screen and (max-width: 768px) {
      width: 100% !important;
    }
    .ivu-col {
      .ivu-card {
        margin-bottom: 10px;
      }
      img {
        width: 100%;
      }
      .title {
        color: #f19fc3;
        font-size: 23px;
        font-weight: bold;
      }
      dl {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        dd {
          margin: 15px 0;
          font-size: 18px;
          p {
            font-size: 18px;

          }
        }
      }
    }
  }
}
</style>